<!--
@description: 
@creationTime: 2025-04-09
-->

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '注册'
  }
}
</route>

<template>
  <view
    class="flex flex-col flex-items-center h-100vh"
    style="background: linear-gradient(to bottom, #ffffff, #add8e6)"
  >
    <!-- logo -->
    <view class="m-3 mt-24 flex flex-justify-center flex-items-center">
      <wd-img
        :width="100"
        :height="100"
        src="https://bkimg.cdn.bcebos.com/pic/6f061d950a7b02087bf4d1bc4c80e5d3572c11df626e?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080"
      />
    </view>
    <view class="w-90vw">
      <wd-card type="rectangle">
        <wd-form ref="formRef" :model="formData" :label-width="50">
          <wd-picker prop="mobile" :columns="userTypeColumns" label="用户类型" v-model="formData.userType" />
          <!-- <ConfigItem label="用户类型" prop="mobile" configName="UserType" v-model="formData.userType"></ConfigItem> -->
          <wd-input
            label="手机号"
            prop="mobile"
            v-model="formData.mobile"
            placeholder="请输入正确的手机号"
            :rules="[{ required: false, validator: mobileValidator, message: '请输入正确的手机号' }]"
          />
          <wd-input
            label="用户名"
            prop="username"
            v-model="formData.username"
            placeholder="请输入用户名"
            :rules="[{ required: false, validator, message: '请输入用户名' }]"
          />
          <wd-input
            label="密码"
            prop="password"
            show-password
            v-model="formData.password"
            placeholder="请输入包含英文和数字的8-16位字符"
            :rules="[{ required: false, validator: passwordValidator, message: '请输入包含英文和数字的8-16位字符' }]"
          />
          <wd-input
            label="确认密码"
            prop="confirmPassword"
            show-password
            v-model="formData.confirmPassword"
            placeholder="请再次输入密码"
            :rules="[{ required: false, validator: confirmPasswordValidator, message: '请输入相同的确认密码' }]"
          />
        </wd-form>
        <view>
          <wd-button :block="true" class="mt-6" @click="submitForm">注册</wd-button>
        </view>

        <view class="text-center mb-3 mt-3">
          已有账号？
          <text class="text-#409EFF" @click="goLogin">立即登录</text>
        </view>
      </wd-card>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { registerApi } from '@/api/loginApi'
// import ConfigItem from '@/components/form/ConfigItem.vue'
interface UserRegistrationData {
  mobile: string
  userType: string
  username: string
  password: string
  confirmPassword: string
}
const pageConfig = ref<any>({})
onLoad(res => {
  pageConfig.value = res
})
const formData = ref<UserRegistrationData>({
  mobile: '18864484503',
  userType: 'company',
  username: '张先生',
  password: 'zxf123456',
  confirmPassword: 'zxf123456'
})
const userTypeColumns = ref([
  {
    label: '企业账号',
    value: 'company'
  },
  {
    label: '普通用户',
    value: 'user'
  },
  {
    label: '客户',
    value: 'customer'
  }
])
const formRef = ref(null)
const validator = (val, data) => {
  if (String(val).length >= 1) {
    return Promise.resolve()
  } else {
    return Promise.reject(data.message)
  }
}
const goLogin = () => {
  if (Object.keys(pageConfig.value).length) {
    uni.redirectTo({ url: '/pages/login/index?id=' + pageConfig.value.id + '&type=' + pageConfig.value.type })
    return
  }
  uni.redirectTo({ url: '/pages/login/index' })
}
const submitForm = () => {
  formRef.value.validate().then(async ({ valid }) => {
    if (valid) {
      uni.showLoading({
        title: '注册中...',
        mask: true
      })
      registerApi(formData.value).then(() => {
        uni.hideLoading()
        uni.showToast({
          title: '注册成功，快去登录吧！',
          icon: 'none',
          duration: 1200
        })
        setTimeout(() => {
          goLogin()
        }, 1000)
      })
    }
  })
}

const mobileValidator = (val, data) => {
  const reg = /(^1\d{10}$)|(^[0-9]\d{7}$)/
  if (reg.test(val)) {
    return Promise.resolve()
  } else {
    return Promise.reject(data.message)
  }
}
const passwordValidator = (val, data) => {
  const reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/
  if (reg.test(val)) {
    return Promise.resolve()
  } else {
    return Promise.reject(data.message)
  }
}
const confirmPasswordValidator = (val, data) => {
  if (formData.value.password === val) {
    return Promise.resolve()
  } else {
    return Promise.reject(data.message)
  }
}
</script>

<style lang="scss" scoped></style>
